<template>
    <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false">
        <div class="goodsList-container">
            <div class="goodsitem" v-for="(item,index) in goodslist" :key="index" @click="getgoodsinfo(item.id)">
                <img :src="item.img_url" alt="">
                <h1>{{item.title}}</h1>
                <div class="goodsinfo">
                    <p class="price">
                        <span class="new">&yen;{{item.sell_price}}</span>
                        <span class="old">&yen;{{item.market_price}}</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </div>  
        </div>
    </mt-loadmore>
    <!-- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
        <ul class="goodsList-container">
            <li class="goodsitem" v-for="(item,index) in goodslist" :key="index" @click="getgoodsinfo(item.id)">
                <img :src="item.img_url" alt="">
                <h1>{{item.title}}</h1>
                <div class="goodsinfo">
                    <p class="price">
                        <span class="new">&yen;{{item.sell_price}}</span>
                        <span class="old">&yen;{{item.market_price}}</span>
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </li>
        </ul>
    </mt-loadmore>  -->
</template>
<script>

export default {
    data(){
        return{
            pageindex:1,
            goodslist:[],
            allLoaded:false
        }
    },
    created(){
        this.getgoodslist()
    },
    methods:{
        getgoodslist(){
            this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result=>{
                // console.log(result)
                if(result.data.status === !0){
                    // this.goodslist = this.goodslist.concat(result.data.message)
                    return 
                }
                // 判断如果是第一页
                if(this.pageindex == 1){
                   // 重置下拉状态
                    this.$refs.loadmore.onTopLoaded();
                    // 重置上拉状态
                    this.allLoaded = false;
                    // 前十条获取数据
                    this.goodslist = result.data.message
                }else{
                    // 重置上拉状态,如果数据加载完成，没有数据后，不能在上拉
                    if (result.data.message.length == 0) {
                        this.allLoaded = true;
                    }
                    // 重置上拉状态
                    this.$refs.loadmore.onBottomLoaded();
                    this.goodslist = this.goodslist.concat(result.data.message);
                }
            })
        },
        // 下拉时触发 请求最新数据
        loadTop() {
            console.log("下拉");
            this.pageindex = 1;
            this.getgoodslist();
        },
        //上拉
        loadBottom() {
            console.log("上拉");
            this.pageindex++;
            this.getgoodslist();
        },
        getgoodsinfo(id){
            this.$router.push({path:`/home/goodsinfo/${id}`})
        }
    }
}
</script>
<style lang="less" scoped>
.goodsList-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 8px;
    .goodsitem{
        width: 49%;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        border: 2px solid #ccc;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        vertical-align: middle;
        padding: 2px;
        min-height:293px;
        img{
            width: 100%;
        }
        h1{
            font-size: 14px;
            height: 42px;
        }
        .goodsinfo{
            background-color: #eee;
            margin: 1px;
            p{
                margin: 0;
                padding: 6px;
            }
            .price{
                .new{
                    font-size: 16px;
                    color: red;
                    font-weight: bold;
                }
                .old{
                    font-size: 12px;
                    text-decoration: line-through;
                    margin-left: 10px;
                }
            }
            .sell{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
            }
        }
    }
}
</style>


